Bootstrap 5 — Input Groups

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add input groups with Bootstrap 5.

Sizing

We can change the size of the file input with the form-file-lg or form-file-sm classes.

For example, we can write:

<div class="form-file form-file-lg mb-3">  
  <input type="file" class="form-file-input" id="large-input">  
  <label class="form-file-label" for="large-input">  
    <span class="form-file-text">Choose a file...</span>  
    <span class="form-file-button">Browse</span>  
  </label>  
</div>

<div class="form-file form-file-sm">  
  <input type="file" class="form-file-input" id="small-input">  
  <label class="form-file-label" for="small-input">  
    <span class="form-file-text">Choose a file...</span>  
    <span class="form-file-button">Browse</span>  
  </label>  
</div>

to add a big and small file input.

Range Slider

Bootstrap 5 comes with styles for a range input.

For example, we can write:

<label for="range-input" class="form-label">range input</label>  
<input type="range" class="form-range" id="range-input">

Then we have a range input where we can drag the handle around.

We set the type to range and use the form-range class to style it.

Min and Max Values

We can set the min and max attribute to limit the values that we can set with it.

For example, we can write:

<label for="range-input" class="form-label">range input</label>  
<input type="range" class="form-range" id="range-input" min="0" max="15">

Steps

Bootstrap 5’s range slider snaps to the nearest integer by default.

To make it snap to a different kind of value, we can use the step attribute,.

For instance, we can write:

<label for="range-input" class="form-label">range input</label>  
<input type="range" class="form-range" id="range-input" min="0" max="15" step="0.5">

to snap to the nearest half instead of the nearest integer.

Input Group

We can extend form control by adding text, buttons, or buttons groups on the left and right side of text input, select, or file input.

To add a basic input group, we can write:

<div class="input-group mb-3">  
  <span class="input-group-text">@</span>  
  <input type="text" class="form-control" placeholder="Username">  
</div>

to add an input group with the span with the input-group-text class.

We can add it to other elements or with different positions or content:

<div class="input-group mb-3">  
  <input type="text" class="form-control" placeholder="username">  
  <span class="input-group-text">[@example](http://twitter.com/example "Twitter profile for @example").com</span>  
</div>

<label for="basic-url" class="form-label">URL</label>  
<div class="input-group mb-3">  
  <span class="input-group-text" id="basic-addon3">https://example.com/</span>  
  <input type="text" class="form-control" id="basic-url">  
</div>

<div class="input-group mb-3">  
  <span class="input-group-text">$</span>  
  <input type="text" class="form-control" aria-label="Amount ">  
  <span class="input-group-text">.00</span>  
</div>

<div class="input-group">  
  <span class="input-group-text">textarea</span>  
  <textarea class="form-control"></textarea>  
</div>

We have inputs with the input-group class added to the div.

Then we have our span with the input-group-text class inside it to add the addons.

Wrapping

By default, the input group wrap with flex-wrap: wrap to accommodate custom form field validation.

We can disable this style with the .flex-nowrap class:

<div class="input-group flex-nowrap">  
  <span class="input-group-text" id="addon-wrapping">@</span>  
  <input type="text" class="form-control" placeholder="Username">  
</div>

Sizing

The sizing of the input group can be changed with the input-group-sm and input-group-lg classes.

For example, we can write:

<div class="input-group input-group-sm mb-3">  
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>  
  <input type="text" class="form-control">  
</div>

<div class="input-group mb-3">  
  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>  
  <input type="text" class="form-control">  
</div>

<div class="input-group input-group-lg">  
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>  
  <input type="text" class="form-control">  
</div>

Sizing of individual group elements isn’t supported.

Checkboxes and Radios

We can add checkboxes and radios in our input group addons,.

For example, we can write:

<div class="input-group mb-3">  
  <div class="input-group-text">  
    <input class="form-check-input" type="checkbox" value="">  
  </div>  
  <input type="text" class="form-control">  
</div>

<div class="input-group">  
  <div class="input-group-text">  
    <input class="form-check-input" type="radio" value="">  
  </div>  
  <input type="text" class="form-control">  
</div>

to add a checkbox to the left of the first input.

And we add a radio button to the left of the 2nd input.

Conclusion

We can add input groups to add various content besides our input boxes.